import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, Table, Button } from 'antd'
export default () => {

    const columns: any = [
        {
            title: '支付方式名称',
            dataIndex: 'pay_titlt',
            width: "240px",
            render: (text: any, record: any) => <div>
                <img src={record.url} alt="" style={{ width: "40px" }} />
                <span style={{ marginLeft: "10px" }}>{text}</span>
            </div>,
        },
        {
            title: '支付方式描述',
            dataIndex: 'desc',

        },
        {
            title: '操作',
            align: "center",
            width: "240px",
            render: (text: any, record: any) => (
                <Button size="small" onClick={() => {

                }} >配置</Button>
            ),
        },
    ];

    const data = [
        {
            key: '1',
            pay_titlt: '支付宝支付',
            url: "http://uniapp.b2b2c.niuteam.cn/addon/alipay/icon.png",
            desc: '支付宝网站(www.alipay.com) 是国内先进的网上支付平台。',
        },
        {
            key: '2',
            pay_titlt: '微信支付',
            url: "http://uniapp.b2b2c.niuteam.cn/addon/wechatpay/icon.png",
            desc: '微信支付，用户通过扫描二维码、微信内打开商品页面购买等多种方式调起微信支付模块完成支付。',
        },
    ];

    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <Table columns={columns} dataSource={data} pagination={false} />
            </Card>
        </PageHeaderWrapper>
    )
}